/*
 * Copyright (C) 2022 KylinSoft Co., Ltd.
 *
 * This program is free software: you can redistribute it and/or modify it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option) any later
 * version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */

import QtQuick 2.12
import org.ukui.qqc2style.private 1.0 as StylePrivate

Rectangle {
    id: root
    property string title: "group"
    property int fontPtSize: 26
    property int textWidth: 620 * Style.tabletScaleFactor
    property int groupNameMaxLength: 32
    signal inputTitleChanged(string newTitle)

    color: "transparent"
    radius: 12
    state: "Hide"

    Rectangle {
        id: rootBackground
        anchors.fill: parent
        radius: root.radius
        color: "transparent"
    }

    states: [
        State {
            name: "Hide"
        },
        State {
            name: "Normal"
            PropertyChanges {
                target: titleText
                visible: true
            }
            PropertyChanges {
                target: titleInput
                visible: false
            }
            PropertyChanges {
                target: cleanImage
                visible: false
            }
            PropertyChanges {
                target: root
                color: "transparent"
            }
            StateChangeScript {
                script: {
                    mouseArea.visible = true
                }
            }
        },
        State {
            name: "Editable"
            PropertyChanges {
                target: titleText
                visible: false
            }
            PropertyChanges {
                target: titleInput
                readOnly: false
                focus: true
                visible: true
                text: titleText.text
            }
            PropertyChanges {
                target: cleanImage
                visible: true
            }
            PropertyChanges {
                target: rootBackground
                color: "#FAFAFA"
                opacity: 0.2
            }
            StateChangeScript {
                script: {
                    mouseArea.visible = false
                }
            }
        }
    ]

    Text {
        id: titleText
        text: title
        elide: Text.ElideRight
        width: textWidth
        height: parent.height
        opacity: 0
        font { pointSize: fontPtSize; weight: Font.Medium
               styleName: StylePrivate.StyleHelper.font.styleName
               family: StylePrivate.StyleHelper.font.family }
        anchors.centerIn: parent
        horizontalAlignment: Text.AlignHCenter;
        verticalAlignment: Text.AlignVCenter;

        states: [
            State { name: "show"; when: root.visible
                PropertyChanges { target: titleText; opacity: 1 }
            }
        ]

        transitions: Transition {
            NumberAnimation { properties: "opacity"; duration: 400; easing.type: Easing.InBack }
        }
    }
    TextInput {
        id: titleInput
        font { pointSize: fontPtSize; weight: Font.Medium
               styleName: StylePrivate.StyleHelper.font.styleName
               family: StylePrivate.StyleHelper.font.family }
        text: titleText.text
        height: parent.height
        width: textWidth
        clip: true
        anchors.left: parent.left
        autoScroll: true
        maximumLength: Style.maxTitleLength
        horizontalAlignment: TextInput.AlignHCenter
        verticalAlignment: TextInput.AlignVCenter
        onTextEdited: {
            var groupNameLength = 0
            var groupNameTmp = ""
            for (var i=0; i < text.length; ++i) {
                if (/^[\u4e00-\u9fa5]+$/.test(text.charAt(i))) {
                    if (groupNameLength < groupNameMaxLength-1) {
                        groupNameLength += 2
                        groupNameTmp += text.charAt(i)
                        if (groupNameLength === groupNameMaxLength) {
                            text = groupNameTmp
                        }
                    } else if (groupNameLength === groupNameMaxLength - 1) {
                        text = groupNameTmp
                        continue
                    }
                } else {
                    if (groupNameLength < groupNameMaxLength) {
                        groupNameLength += 1
                        groupNameTmp += text.charAt(i)
                    }
                    if (groupNameLength === groupNameMaxLength) {
                        text = groupNameTmp
                    }
                }
            }
        }
        onEditingFinished: {
            if (text.length === 0) {
                text = Qt.binding(function() { return title; })
            } else {
                inputTitleChanged(text)
            }
        }
    }
    MouseArea {
        id: mouseArea
        anchors.fill: titleInput
        pressAndHoldInterval: 300
        onPressAndHold: {
            root.state = "Editable"
        }
    }

    Image {
        id: cleanImage
        anchors.right: parent.right
        anchors.rightMargin: 30 * Style.tabletScaleFactor
        anchors.verticalCenter: parent.verticalCenter
        sourceSize: Qt.size(40, 40)
        source: "qrc:/ui/images/cleanbtn.svg"
        visible: false
        MouseArea {
            anchors.fill: parent
            onClicked: {
                titleInput.text = ""
            }
        }
    }
}
